<template>
  <div class="login">
    <a href="/" class="logo"></a>
    <div class="login-inner">
      <h1 class="login-title">登录</h1>
      <div class="login-item mgb20">
        <input type="text" class="clearError" id="ipt_account" name="username" placeholder="请输入手机号码" tabindex="1">
        <a href="javascript:;" class="clearIpt j-clearIpt"><i class="gicon-remove"></i></a>
      </div>
      <div class="login-item mgb20">
        <input type="password" class="clearError" name="password" id="ipt_pwd" placeholder="请输入密码" tabindex="2">
        <a href="javascript:;" class="clearIpt j-clearIpt"><i class="gicon-remove"></i></a>
      </div>
      <span class="error_msg">{{errMsg}}</span>
      <div style="padding-top: 20px">
        <input v-if="loginBtnEnable" type="button" :value="loginBtnTitle" class="login-btn" @click="login">
        <input v-else type="button" :value="loginBtnTitle" class="login-btn disabled" @click="login">
      </div>
    </div>
  </div>
</template>
<script>
  import {post} from '@/config'
  export default {
    methods: {
      login () {
        if (this.loginBtnEnable) {
          this.loginBtnEnable = false
          this.loginBtnTitle = '登录中......'
          let that = this
          post('/login', {}, function (t) {
            alert(JSON.stringify(t))
          }, function (t) {
            that.errMsg = '网络异常'
            that.loginBtnEnable = true
            that.loginBtnTitle = '登录'
          })
        }
      }
    },
    data () {
      return {
        loginBtnEnable: true,
        loginBtnTitle: '登录',
        errMsg: '',
        errCode: ''
      }
    }
  }
</script>
<style>
  .login, body {
    background: #fff;
  }
  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -190px;
    width: 380px;
    z-index: 9;
    box-shadow: 0 0 18px 1px rgba(0, 0, 0, .2);
    border: 1px solid #eee
  }
  .login .logo {
    background: url(../assets/logo.png) no-repeat rgba(0, 0, 0, 0);
    display: block;
    height: 90px;
    width: 250px;
    left: 40%;
    margin-left: -60px;
    position: absolute;
    top: -70px
  }
  .login-inner {
    width: 265px;
    margin: 27px auto
  }
  .login-title {
    width: 100%;
    line-height: 30px;
    font-size: 24px;
    margin: 0 auto;
    font-family: "microsoft yahei";
    font-weight: 400;
    padding-bottom: 40px;
    color: #6f6f6f;
    text-align: center;
  }
  .login-item {
    position: relative;
    width: 243px;
    height: 28px;
    padding: 5px 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    overflow: hidden
  }
  .login-item input {
    border: 0;
    height: 28px;
    line-height: normal;
    width: 100%;
    font-size: 14px
  }
  .clearIpt {
    display: block;
    position: absolute;
    right: 2px;
    top: 12px;
    width: 14px;
    height: 14px;
    z-index: 9;
    opacity: 0;
    -webkit-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear
  }

  .clearIpt i {
    margin: 0
  }
  .login-item:hover .clearIpt {
    display: block;
    opacity: 1
  }
  .login-btn {
    display: block;
    background: #0E64A0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    border: none
  }

  .login-btn.disabled {
    background: #ccc
  }
  .mgb20 {
    margin-bottom: 20px
  }
  .error_msg {
    color: #ff0017;
    padding-left: 10px;
  }
</style>
